<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{width:100px;height:100px;border:10px solid red;display: none;}
	</style>
	<script type="text/javascript">
	window.onload = function (){

		//阻止冒泡 ：当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;	(浏览器默认是false)

		var oBtn = document.getElementById('btn');
		var oDiv = document.getElementById('div1');

		oBtn.onclick = function ( ev ) {
			var ev = ev || event;
			ev.cancelBubble = true;		//阻止当前对象的当前事件的冒泡【只能单独阻止，一次只能阻止一个事件，多个事件要设置多个设置】

			oDiv.style.display = 'block';
		}

		document.onclick = function () {		//阻止后即使点击p标签，p接受到事件但是没有事件函数去执行，还是会传到document
			oDiv.style.display = 'none';
		}
	}
	</script>
</head>
<body>
	<input id="btn" type="button" value="点击" />
	<div id="div1"></div>
	<p>pppp</p>
	<p>pppp</p>
	<p>pppp</p>
</body>
</html>